<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        100% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">

      <path d="M100 300
               Q0,0 300,100
               Q600,0 500,300
               Q600,600 300,500
               Q0,600 100,300
               M300,300
               C300,300 30
               z"
            style="fill:rgba(255,0,0,0.1);" />

      <!-- 连续贝塞尔曲线可以简写，只保留第一个Q -->
      <path d="M100 300
               Q0,0 300,100
               600,0 500,300
               600,600 300,500
               0,600 100,300
               M300,300
               C300,300 30
               z"
            style="fill:rgba(0,255,0,0.1);" />

      <!-- T 平滑的贝塞尔曲线，
      新控制点默认计算为上一个控制点的相对于上一个终点的中心对称的位置，
      计算公式为：
      x2 = x + (x - x1) = 2x - x1
      y2 = y + (y - y1) = 2y - y1 -->
      <path d="M300 100
               Q0,200 300,300
               T300,500"
            style="fill:none;stroke: red;" />

      <path d="M20 80 C 50 20, 150 60, 200 120"
            style="stroke: black; fill: none;" />


      <!-- 三次贝塞尔曲线 -->
      <path d="M100 100
               C200 100, 300 300, 200 400"
            style="stroke: black; fill: none;" />

      <!-- 如果想要平滑的曲线，使用S或s命令，类似于二次贝塞尔曲线的T或t命令 -->
      <path d="M30 100
               C50 30, 70 50, 100 100
               S150 40, 200 80"
            style="fill: transparent;stroke: blue;" />
      <!--
        C[第一个控制点], [第二个控制点], [终点]
        S[第二个控制点], [终点]
        S命令的第一个控制点由于需要曲线平滑，所以自动取了上一个三次贝塞尔曲线的第二个控制点关于C命令的终点的中心对称的点
      -->


    </svg>

    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      // Renderer();
    </script>
  </body>

</html>
